<template>
  <client-only>
    <div class="in-wrap">
      <header class="header">
        <section class="container">
          <h1 class="logo">
            <a href="/" title="青动大学生运动社区">
              <img src="~/assets/img/logo.png" width="100%" alt="青动大学生运动社区"/>
            </a>
          </h1>
          <div class="h-r-nsl">
            <ul class="nav">
              <router-link to="/" tag="li" active-class="current" exact>
                <a>首页</a>
              </router-link>
              <router-link to="/forum" tag="li" active-class="current">
                <a>论坛</a>
              </router-link>
              <router-link to="/article" tag="li" active-class="current">
                <a>文章</a>
              </router-link>
              <router-link to="/share" tag="li" active-class="current">
                <a>分享</a>
              </router-link>
            </ul>
            <ul class="h-r-login">
              <li v-if="!user_info" id="no-login">
                <a href="/login_password" title="登录">
                  <em class="icon18 login-icon">&nbsp;</em>
                  <span class="vam ml5">登录</span>
                </a>
                |
                <a href="/register" title="注册">
                  <span class="vam ml5">注册</span>
                </a>
              </li>
              <li v-if="user_info" id="is-login-one" class="mr10">
                <q class="red-point" style="display: none">&nbsp;</q>
              </li>
              <li v-if="user_info" class="h-r-user">
                <el-dropdown>
                  <a class="el-dropdown-link">
                    <img
                      :src="user_info.avatar"
                      width="32"
                      height="32"
                      class="vam"
                    />
                    <span id="userName" class="vam disIb">{{
                        user_info.username
                      }}</span>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </a>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                      ><a href="/user_center">个人中心</a></el-dropdown-item
                      >
                      <el-dropdown-item
                      ><a href="/collect">课程收藏</a></el-dropdown-item
                      >
                      <el-dropdown-item
                      ><a href="javascript:void(0);" @click="logout()"
                      >退出</a
                      ></el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </li>
            </ul>
          </div>
          <div class="h-r-search">
            <label class="h-r-s-box">
              <input
                type="text"
                placeholder="话题、文章、分享"
                v-model="search_contains"
              />
              <button class="s-btn">
                <em class="icon18">&nbsp;</em>
              </button>
            </label>
          </div>
        </section>
      </header>
      <nuxt/>
    </div>
  </client-only>
</template>
<script>
import '~/assets/css/reset.css'
import '~/assets/css/theme.css'
import '~/assets/css/base.css'
import '~/assets/css/global.css'
import '~/assets/css/web.css'
import '~/assets/css/activity_tab.css'
import '~/assets/css/bottom_rec.css'
import '~/assets/css/nice_select.css'
import '~/assets/css/order.css'
import '~/assets/css/swiper-3.3.1.min.css'

export default {
  data () {
    return {
      token: '',
      search_contains: '',
      user_info: {
        birthday: '',
        avatar: '',
        email: '',
        username: '',
        personal_profile: '',
        sex: '',
        campus_identity: {
          campus_name: '',
          major: '',
          class_name: '',
          admission_date: '',
        }
      },
    }
  },
  created () {
    this.token = this.$cookies.get('qingdong_token')
    this.user_info = this.$cookies.get('qingdong_user')
  },
  methods: {
    logout () {
      // 清空cookie中的用户信息和token
      this.$cookies.set('qingdong_token', '', { domain: 'localhost' })
      this.$cookies.set('qingdong_user', '', { domain: 'localhost' })
      //跳转页面
      window.location.href = '/'
    },
  },
}
</script>
<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.header {
  background-color: #2779F7;
  height: 80px
}

.nav {
  padding: 15px 0 0 50px
}

.nav, .nav li, .nav li a {
  float: left
}

.nav li a {
  border-bottom: 2px solid transparent;
  color: #FFFFFF;
  display: block;
  font-size: 20px;
  line-height: 50px;
  padding: 0 10px;
  margin: 0 10px;
  transition: .3s;
  -webkit-transition: .3s
}

.logo {
  float: left;
  width: 220px;
  height: 72px;
  overflow: hidden;
  margin: 0 auto
}

.logo a {
  display: table-cell;
  vertical-align: middle;
  height: 72px
}

.logo a img {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: middle
}
</style>
